<template>
  <view>
    <view style="background: #fd7753" class="p-20">
      <at-card>
        <view>
          <view class="f-s-m f-c-9">
            2025-07-23 至 2025-10-23 12:00
          </view>
          <view class="flex-between">
            <view>
              <view class="f-s-lx fw-600 py-10">测试</view>
              <view class="flex">
                <view class="work-tag">男女不限</view>
                <view class="work-tag">招10人</view>
              </view>
            </view>
            <view class="money fw-600">10元/天</view>
          </view>
        </view>
      </at-card>
    </view>
    <view class="p-20">
      <up-form labelPosition="top" labelWidth="200">
        <up-form-item
            label="时间"
        >
          <view class="gig-item">13:00 至 18:00</view>
        </up-form-item>
        <up-form-item label="工作地点">
          <view class="gig-item">上海市浦东新区</view>
        </up-form-item>
        <up-form-item label="工作内容">
          <view class="gig-item">负责小程序的UI设计</view>
        </up-form-item>
        <up-form-item label="雇主信息">
          <view class="gig-item flex">
            <up-avatar :src="'https://avatar.csdnimg.cn/1/2/1/1_1324125841001.jpg'"/>
            <view class="ml-20">犀牛技术有限公司</view>
          </view>
        </up-form-item>
      </up-form>
    </view>
    <at-warning/>
    <view class="fixed-bottom">
      <view class="flex-between px-20" style="background: #fff">
        <view class="flex">
          <view class="p-10 flex-c-center">
            <up-icon name="share" size="25" color="#fd7753"/>
            <view style="color: #fd7753" class="f-s-m">分享</view>
          </view>
          <view class="p-10 flex-c-center ml-20">
            <up-icon name="star" size="25" color="#fd7753"/>
            <view style="color: #fd7753" class="f-s-m">收藏</view>
          </view>
        </view>
        <view class="flex">
          <view class="deliver-btn flex-c-center">
            <view class="f-s-l">申请接单</view>
            <view class="f-s-s">申请接单后可看到雇主电话</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">

</script>


<style scoped lang="scss">
:deep(.u-form-item__body__left__content__label) {
  font-weight: 600;
}

.gig-item {
  padding: 20rpx;
  border: #fd7753 1rpx solid;
  border-radius: 10rpx;
  margin-top: 10rpx;
  width: 100%;
  height: 60rpx;
  line-height: 60rpx;
}

.deliver-btn {
  background: #fd7753;
  color: #fff;
  padding: 4rpx 80rpx;
  border-radius: 5rpx;

  &:active {
    background: #fc8767;
  }
}
</style>
